import React, { useEffect, useState } from 'react'
import axios from '../axios/axios'
import Hoc from '../Hoc'
import { useNavigate,useLocation } from 'react-router-dom'
import '../css/xiangqing.css'
import dayjs from 'dayjs'
export default function Xiangqing() {
    const nav=useNavigate()
    const location = useLocation()
    const id = location.search.split('=')[1]
    const [department, setDepartment] = useState([])
    const [medical, setMedical] = useState([])
    const get_dan = async () => {
        let data = await axios.get('/dan_department', {
            params: {
                _id: id
            }
        })
        setDepartment(data.data)
    }
    const get_medical = async () => {
        let data = await axios.get('/medical')
        setMedical(data.data)
    }
    const tz=(id,status,item,date)=>{
        if(status==false){
            nav(`/reservation_xx?id=${id}&&date=2024-${date}&&time=${item}`)
        }else{
            return 
        }
    }
    useEffect(() => {
        get_dan()
        get_medical()
    }, [])
    return (
        <div>
            <div className='xiangqing_box'>
                <Hoc title='详情'></Hoc>
                <div className='xiangqing_title'>
                    {department.map(item => {
                        return <div key={item._id}>
                            <img src={item.img} className='xiangqing_img' />
                            <div className='xiangqing_content'>
                                <div className='xiangqing_name'><span className='xiangqing_name1'>{item.name}</span> <span className='xiangqing_yishi'>{item.physician}</span></div>
                                <div className='xiangqing_shi'>北京协和医院博士生导师</div>
                                <div className='xiangqing_xian'><hr /></div>
                                <div className='xiangqing_count'>
                                    <div className='xiangxi_num'>{item.yuyue_num}</div>
                                    <div className='xiangxi_num1'>{item.zixun_num}</div>
                                    <div className='xiangxi_num2'>{item.guanzhu_num}</div>
                                    <br></br>
                                    <div className='xiangxi_liang'>预约量</div>
                                    <div className='xiangxi_liang1'>咨询量</div>
                                    <div className='xiangxi_liang1'>关注量</div>
                                </div>

                            </div>
                            <div className='xiangqing_con'>
                                <div className='xiangqing_con1'>内分泌专家，甲状腺综合手术治疗专家，省级内分泌科委员会委员，独创中医疗法，内分泌科疑难杂症综合治疗
                                </div>
                            </div>
                        </div>
                    })}
                </div>
            </div>
            {department.map(item => {
                return <div key={item._id} className='yuyue_box'>
                    <div className='yuyue_hospital'>{item.hospital} <span className='yuyue_home'>医院首页</span></div>
                    <div className='yuyue_xian'></div>
                    <div className='yuyue_men'>{item.department}</div>

                    {item.status_s1 ? <div className='yy_man' onClick={()=>tz(item._id,item.status_s1,item.date1_s,item.date1)}>
                        <div className='yuyue_date11'>{item.date1}</div>
                        <div className='yuyue_time1'>{item.date1_s}</div>
                        <div className='yuyue_man1'>
                            {item.status_s1 ? <span className='yuyue_man1'>约满</span> : <span className='yuyue_man2'>预约</span>}
                        </div></div>
                        :
                        <div className='yuyue_date' onClick={()=>tz(item._id,item.status_s1,item.date1_s,item.date1)}>
                            <div className='yuyue_date1'>{item.date1}</div>
                            <div className='yuyue_time'>{item.date1_s}</div>
                            <div className='yuyue_man'>
                                {item.status_s1 ? <span className='yuyue_man11'>预约</span> : <span className='yuyue_man2'>约满</span>}
                            </div></div>
                    }


                    {item.status_x1 ? <div className='yy_man' onClick={()=>tz(item._id,item.status_x1,item.date1_x,item.date1)}>
                        <div className='yuyue_date11'>{item.date1}</div>
                        <div className='yuyue_time1'>{item.date1_s}</div>
                        <div className='yuyue_man1'>
                            {item.status_x1 ? <span className='yuyue_man11'>预约</span> : <span className='yuyue_man2'>约满</span>}
                        </div></div>
                        :
                        <div className='yuyue_date' onClick={()=>tz(item._id,item.status_x1,item.date1_x,item.date1)}>
                            <div className='yuyue_date1'>{item.date1}</div>
                            <div className='yuyue_time'>{item.date1_x}</div>
                            <div className='yuyue_man'>
                                {item.status_x1 ? <span className='yuyue_man1'>约满</span> : <span className='yuyue_man2'>预约</span>}
                            </div></div>
                    }
                    {item.status_s2 ? <div className='yy_man' onClick={()=>tz(item._id,item.status_s2,item.date2_s,item.date2)}>
                        <div className='yuyue_date11'>{item.date2}</div>
                        <div className='yuyue_time1'>{item.date2_s}</div>
                        <div className='yuyue_man1'>
                            {item.status_s2 ? <span className='yuyue_man11'>预约</span> : <span className='yuyue_man2'>约满</span>}
                        </div></div>
                        :
                        <div className='yuyue_date' onClick={()=>tz(item._id,item.status_s2,item.date2_s,item.date2)}>
                            <div className='yuyue_date1'>{item.date2}</div>
                            <div className='yuyue_time'>{item.date2_s}</div>
                            <div className='yuyue_man'>
                                {item.status_s2 ? <span className='yuyue_man1'>约满</span> : <span className='yuyue_man2'>预约</span>}
                            </div></div>
                    }
                    {item.status_x2 ? <div className='yy_man' onClick={()=>tz(item._id,item.status_x2,item.date2_x,item.date2)}>
                        <div className='yuyue_date11'>{item.date2}</div>
                        <div className='yuyue_time1'>{item.date2_x}</div>
                        <div className='yuyue_man1'>
                            {item.status_x2 ? <span className='yuyue_man11'>预约</span> : <span className='yuyue_man2'>约满</span>}
                        </div></div>
                        :
                        <div className='yuyue_date' onClick={()=>tz(item._id,item.status_x2,item.date2_x,item.date2)}>
                            <div className='yuyue_date1'>{item.date2}</div>
                            <div className='yuyue_time'>{item.date2_x}</div>
                            <div className='yuyue_man'>
                                {item.status_x2 ? <span className='yuyue_man1'>约满</span> : <span className='yuyue_man2'>预约</span>}
                            </div></div>
                    }
                    {item.status_s3 ? <div className='yy_man' onClick={()=>tz(item._id,item.status_s3,item.date3_s,item.date3)}>
                        <div className='yuyue_date11'>{item.date3}</div>
                        <div className='yuyue_time1'>{item.date3_s}</div>
                        <div className='yuyue_man1'>
                            {item.status_s3 ? <span className='yuyue_man1'>约满</span> : <span className='yuyue_man2'>预约</span>}
                        </div></div>
                        :
                        <div className='yuyue_date' onClick={()=>tz(item._id,item.status_s3,item.date3_s,item.date3)}>
                            <div className='yuyue_date1'>{item.date3}</div>
                            <div className='yuyue_time'>{item.date3_s}</div>
                            <div className='yuyue_man'>
                                {item.status_s3 ? <span className='yuyue_man11'>预约</span> : <span className='yuyue_man2'>约满</span>}
                            </div></div>
                    }
                    {item.status_x3 ? <div className='yy_man' onClick={()=>tz(item._id,item.status_x3,item.date3_x,item.date3)}>
                        <div className='yuyue_date11'>{item.date3}</div>
                        <div className='yuyue_time1'>{item.date3_x}</div>
                        <div className='yuyue_man1'>
                            {item.status_x3 ? <span className='yuyue_man11'>预约</span> : <span className='yuyue_man2'>约满</span>}
                        </div></div>
                        :
                        <div className='yuyue_date' onClick={()=>tz(item._id,item.status_x3,item.date3_x,item.date3)}>
                            <div className='yuyue_date1'>{item.date3}</div>
                            <div className='yuyue_time'>{item.date3_x}</div>
                            <div className='yuyue_man'>
                                {item.status_x3 ? <span className='yuyue_man1'>约满</span> : <span className='yuyue_man2'>预约</span>}
                            </div></div>
                    }
                    {item.status_s4 ? <div className='yy_man' onClick={()=>tz(item._id,item.status_s4,item.date4_s,item.date4)}>
                        <div className='yuyue_date11'>{item.date4}</div>
                        <div className='yuyue_time1'>{item.date4_s}</div>
                        <div className='yuyue_man1'>
                            {item.status_s4 ? <span className='yuyue_man1'>预约</span> : <span className='yuyue_man2'>约满</span>}
                        </div></div>
                        :
                        <div className='yuyue_date' onClick={()=>tz(item._id,item.status_s4,item.date4_s,item.date4)}>
                            <div className='yuyue_date1'>{item.date4}</div>
                            <div className='yuyue_time'>{item.date4_s}</div>
                            <div className='yuyue_man'>
                                {item.status_s4 ? <span className='yuyue_man11'>约满</span> : <span className='yuyue_man2'>预约</span>}
                            </div></div>
                    }
                    {item.status_x4 ? <div className='yy_man' onClick={()=>tz(item._id,item.status_x4,item.date4_x,item.date4)}>
                        <div className='yuyue_date11'>{item.date4}</div>
                        <div className='yuyue_time1'>{item.date4_x}</div>
                        <div className='yuyue_man1'>
                            {item.status_x4 ? <span className='yuyue_man1'>约满</span> : <span className='yuyue_man2'>预约</span>}
                        </div></div>
                        :
                        <div className='yuyue_date' onClick={()=>tz(item._id,item.status_x4,item.date4_x,item.date4)}>
                            <div className='yuyue_date1'>{item.date4}</div>
                            <div className='yuyue_time'>{item.date4_x}</div>
                            <div className='yuyue_man'>
                                {item.status_x4 ? <span className='yuyue_man11'>预约</span> : <span className='yuyue_man2'>约满</span>}
                            </div></div>
                    }
                    <br></br>
                </div>

            })}
            <br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br>
            <div className='wenzhang_box'>
                <div className='wenzhang_title'>医生文章</div>
                <div className='wenzhang_xian'></div>
                {medical.map(item => {
                    return <div key={item._id} className='wenzhang_content'>
                        <div className='wenzhang_left'>
                            <div className='wenzhang_title1'>{item.title}</div>
                            <div className='wenzhang_text'>{item.text}</div>
                            <div className='wenzhang_num'>{item.num}阅读<span className='wenzhang_date'>{dayjs(item.date).format('YYYY-MM-DD')}</span></div>
                        </div>
                        <div className='wenzhang_right'>
                            <img src={item.img} style={{ width: '100px', height: '80px' }} />
                        </div>
                    </div>
                })}
            </div>

        </div>
    )
}